<template>
    <div>

        <button @click="changeCounter">App: {{counter}}</button>

        <home></home>
    </div>
</template>
<script>
import { ref, provide, readonly } from 'vue';
import Home from './home.vue';
export default {
    components: {
        Home
    },
    setup() {
        const name = ref("yzh");
        const counter = ref(10);

        //使用readonly传过去只读的数据 不让子组件改变这里传过去的数据
        provide("name", readonly(name));
        provide("counter", readonly(counter))

        const changeCounter = () => counter.value++;

        return {
            name,
            counter,
            changeCounter
        }
    }
}
</script>
<style>
</style>

